<template>
	<view>
		<view class='content'>
			<view class="beizhu">
				<textarea v-model="form.content" placeholder="写明要搬运的物品大概信息"></textarea>
				<Uploading @change="onImgChange"></Uploading>
			</view>
			<view class="address">
				<view class="fahuo" @click="show = true">
					<view class="left">
						<view class="icon">搬</view>
						<view class="fasongdizhi" v-if="form.shouhuo">{{ form.shouhuo }}</view>
						<text v-else>请选择地址</text>
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="#C4C4C4" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="price">
				<view class="price-item flexjcsb">
					<text>搬运计费</text>
					<view class="price-item-right">{{ billing }}/小时<text></text></view>
				</view>
				<view class="price-item flexjcsb" @click="timeShow = true">
					<text>搬运时间</text>
					<view class="price-item-right">{{ form.start_time }}<text>></text></view>
				</view>
				<view class="price-item flexjcsb" @click="durationShow = true">
					<text>服务时长</text>
					<view class="price-item-right">{{ form.time }}小时<text>></text></view>
				</view>
				<view class="price-item flexjcsb">
					<text>小费</text>
					<view class="">
						<uni-number-box v-model="form.tip"></uni-number-box>
					</view>
				</view>
			</view>

			<view class="agreement">
				<view class="">
					<checkbox :checked="form.agreementFlag" @click="form.agreementFlag = !form.agreementFlag"
						style="transform: scale(0.7);" color="#F14500" />
					<text>已阅读并同意</text>
				</view>
				<text class="bang" @click="skipXY">《帮送服务协议》</text>
			</view>

		</view>
		<view class="btn">
			<view class="totalPrice">¥{{ totalPrice }}</view>
			<view class="xiadan" @click="placeAnOrder">下单</view>
		</view>

		<!-- 地址 -->
		<u-popup v-model="show" mode="bottom">
			<view class="popup">
				<view class="takeList">
					<view class="take" v-for="(item, index) in takeList" :key="item.id">
						<radio-group>
							<view class="takeInfo">
								<radio :value="item.id" :checked="index == shouhuoCurrent" @click="radioChangeTake(index,)" />
								<view>{{ item.address }}</view>
							</view>
							<view class="name">
								<text>{{ item.name }}</text>
								<text>{{ item.mobile }}</text>
							</view>
						</radio-group>
					</view>
				</view>
				<view class="btn" @click="addSite">
					<text>新建地址</text>
				</view>
			</view>
		</u-popup>
		<!-- 时间 -->
		<u-picker mode="time" v-model="timeShow" :params="params" @confirm="confirmTime"></u-picker>
		<!-- 服务时长 -->
		<u-picker mode="selector" v-model="durationShow" :default-selector="[0]" :range="durationList"
			@confirm="confirmDuration"></u-picker>

	</view>
</template>

<script>
import Uploading from '@/components/Uploading/index.vue'
const $api = require('@/utils/request.js').API
export default {
	components: {
		Uploading
	},
	data() {
		return {
			// 小时计费
			billing: 25,
			// 选择时间的时分秒
			params: {
				year: false,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: false
			},
			// 选择时间
			timeShow: false,
			// 选择时长
			durationShow: false,
			//收货地址列表
			takeList: [],
			// 发货地址
			show: false,
			form: {
				// 备注
				content: '',
				//收货地址
				shouhuo: null,
				// 收货id
				receiving_address_id: null,
				// 投保
				price: 0,
				// 小费
				tip: 0,
				// 服务时长
				time: 0,
				// 协议
				agreementFlag: true,
				// 订单类型
				order_type: 0,
				// 里程
				mileage: 0,
				// 图片
				images: [],
				// 运费	
				freight: 0,
				// 帮运时间
				start_time: ''
			},
			// 发货选中
			fahuoCurrent: null,
			// 服务时长
			durationList: [0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8]

		}
	},
	onLoad(options) {


		this.getTakeList()
	},
	computed: {
		totalPrice() {
			return this.form.price + this.form.tip + this.form.freight
		}

	},
	methods: {
		// 获取收货列表
		getTakeList() {
			$api.postAddressList().then(res => {
				this.takeList = res.data.data.list
			})
		},

		// 监听上传图片
		onImgChange(list) {
			this.form.images = list
		},
		// 选择时间
		confirmTime(time) {
			let { month, day, hour, minute } = time
			let strTime = `${month}月${day}日${hour}点${minute}分`
			this.form.start_time = strTime
		},
		// 选择服务时长
		confirmDuration(index) {
			this.form.time = this.durationList[index]
			// 计算价格
			this.form.price = this.form.time * this.billing
		},
		// 切换地址
		radioChangeTake(index, type) {
			let { address, house_number, id, } = this.takeList[index]
			this.form.receiving_address_id = id
			this.form.shouhuo = address + house_number
			this.show = false
			this.shouhuoCurrent = index
		},
		// 勾选协议
		bindAgreement(item) {
			this.form.toubao = item.detail.value
		},
		// 下单
		placeAnOrder() {
			if (!this.form.agreementFlag) {
				uni.showToast({
					title: '请阅读并同意',
					icon: 'none'
				})
				return
			}
			this.form.order_type = 3
			$api.placeOrder(this.form).then(res => {
				$api.payPrepay({
					order_id: res.data.data.order_id,
					pay_type: 'wechatpay',
					is_matched: 0,
				}).then(res => {
					console.log(res.data.data);
					$api.postOrderGoodsPayment({
						out_trade_no: res.data.data,
						pay_type: 'wechatpay',
						is_matched: 0,
					}).then(res => {
						let obj = res.data.data.data
						this.popups = false
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: obj.timeStamp,
							nonceStr: obj.nonceStr,
							package: obj.package,
							signType: obj.signType,
							paySign: obj.paySign,
							success: function (res) {
								uni.switchTab({
									url: '/pages/Ordergoods/Ordergoods'
								})
							},
							fail: function (err) {
								uni.switchTab({
									url: '/pages/Ordergoods/Ordergoods'
								})
							}
						});
					})
				})
			}).catch(err => {
				uni.showToast({
					title: '下单失败，请检查信息是否有误',
					icon: 'none'
				})
			})
		},
		// 协议
		skipXY() {
			uni.navigateTo({
				url: '/pages_runErrands/ptAgreement/index'
			})
		},
		// 新建地址
		addSite() {
			uni.navigateTo({
				url: '/pages_my/my/giveServiceTo/address'
			})
			this.show = false
			this.shouhuoShow = false
		}
	},
}
</script>

<style scoped lang='scss'>
.content {
	min-height: 100vh;
	background: #fbfbfb;
	padding-bottom: 150rpx;
}


.beizhu {
	background: #fff;
	padding: 10px 15px;
	margin-bottom: 5px;

	textarea {
		height: 180rpx;
	}

	.upload {
		width: 160rpx;
		height: 160rpx;
		border: 2px dotted #BFBFBF;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
}

.wupinguige {
	background: #fff;
	padding: 10px 15px;
	margin-bottom: 5px;
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	font-weight: 400;
	color: #686868;
	line-height: 40rpx;

	.zhongliang {
		font-size: 28rpx;
		color: #f14600;
	}
}

.address {
	background: #fff;
	padding: 10px 15px;
	margin-bottom: 5px;

	.fahuo,
	.shouhuo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;

		.left {
			display: flex;
			align-items: center;

			.fasongdizhi {
				flex: 1;
			}

			text {
				color: #cecbcb;
			}

			.icon {
				width: 52rpx;
				height: 52rpx;
				background: #F9CE27;
				border-radius: 50%;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 52rpx;
				text-align: center;
				margin-right: 6px;
			}
		}
	}

	.shouhuo {
		.left {
			.icon {
				background: #F14500;

			}
		}

	}


}

.commodityValue {
	background: #fff;
	padding: 10px 15px;
	margin-bottom: 5px;
	border-radius: 5rpx;

	.commodityValue-title {
		font-size: 28rpx;
		font-weight: 400;
		color: #686868;
		// padding: 27rpx 0 29rpx 28rpx;
		padding: 27rpx 0 18rpx 28rpx;
	}

	.commodityValue-main {
		width: 642rpx;
		margin: auto;

		.contents {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.commodityValue-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 310rpx;
			height: 87rpx;
			background: #EDEDED;
			border-radius: 5rpx;
			margin-top: 11rpx;
			padding: 0 10rpx 0 18rpx;

			.commodityValue-item-left {
				view:first-child {
					font-size: 22rpx;
					font-weight: 400;
					color: #686868;
				}

				view:last-child {
					font-size: 26rpx;
					font-weight: 500;
					color: #2E2E2E;
				}
			}
		}
	}
}

.price {

	background: #fff;
	padding: 10px 15px;
	margin-bottom: 5px;

	.price-item {
		height: 80rpx;
		padding: 0 38rpx 0 24rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #686868;
		border-bottom: 5px solid #FBFBFB;

		.price-item-right {
			font-size: 28rpx;
			font-weight: 400;
			color: #717171;

			text {
				padding-left: 15rpx;
			}
		}
	}

	.price-item:last-child {
		border: none;
	}
}

.popup {
	background: #fff;

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		view {
			width: 250rpx;
		}

		.ExpenseDetails {
			font-size: 30rpx;
			font-weight: 500;
			color: #313131;
			text-align: center;
			padding: 25rpx 0 33rpx 0;
		}

		.PricingRules {
			text-align: right;
			font-size: 24rpx;
			font-weight: 400;
			color: #F14500;
			padding-right: 36rpx;
		}
	}

	.popup-main {
		width: 666rpx;
		margin: auto;

		.popup-main-item {
			padding: 10rpx 0;
		}

		.popup-main-item:last-child {
			padding-bottom: 30rpx;
		}
	}
}

.agreement {
	display: flex;
	align-items: center;
	width: 702rpx;
	height: 50rpx;
	line-height: 50rpx;
	margin: auto;
	margin-top: 20rpx;

	text {
		font-size: 28rpx;
		font-weight: 400;
		color: #000000;
	}

	.bang {
		color: #F14500;
	}
}

.btn {
	position: fixed;
	bottom: 0px;
	left: 15px;
	right: 15px;
	margin: 15px;
	height: 98rpx;
	border-radius: 49rpx;
	display: flex;
	align-items: center;
	font-weight: 500;
	color: #FFFFFF;
	overflow: hidden;
	line-height: 98rpx;

	.totalPrice {
		flex: 5;
		background: #5d5d5d;
		height: 98rpx;
		padding-left: 40rpx;
	}

	.xiadan {
		flex: 2;
		background: #F14500;
		height: 98rpx;
		text-align: center;

	}
}

.takeList {
	min-height: 300px;

	.take {
		padding: 15px;

		.takeInfo {
			display: flex;
			align-items: center;


		}

		.name {
			margin-left: 30px;
			margin-top: 4px;
			color: #717171;
		}
	}
}

.popup {
	position: relative;

	.takeList {
		min-height: 300px;
		padding-bottom: 150rpx;

		.take {
			padding: 15px;

			.takeInfo {
				display: flex;
				align-items: center;


			}

			.name {
				margin-left: 30px;
				margin-top: 4px;
				color: #717171;
			}
		}
	}

	.btn {
		left: 30rpx;
		right: 30rpx;
		position: absolute;
		bottom: 20px;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #f14500;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
